import { StyleSheet } from 'react-native';
import { phonePx } from '../../../../util/adapt';
import statusBarManager from '../../../../util/native/statusBarManager';
import { APP_BLACK } from '../../../../constant/color';

const statusBarHeight = statusBarManager.getStatusBarHeight();

export default StyleSheet.create({
  headerContainer: {
    position: 'absolute',
    left: 0,
    top: 0,
    right: 0,
    height: phonePx(44) + statusBarHeight,
    justifyContent: 'flex-end'
  },
  header: {
    height: phonePx(44),
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  back: {
    position: 'absolute',
    left: phonePx(12),
    alignItems: 'center',
    justifyContent: 'center'
  },
  backIcon: {
    width: phonePx(26),
    height: phonePx(26)
  },
  stickBackIcon: {
    width: phonePx(8),
    height: phonePx(15)
  },
  stickHeader: {
    top: 0,
    position: 'absolute',
    height: phonePx(44) + statusBarHeight,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ffffff',
    width: phonePx(360)
  },
  title: {
    color: APP_BLACK,
    fontSize: phonePx(16),
    fontWeight: '400',
    marginTop: statusBarHeight
  },
  stickBack: {
    position: 'absolute',
    left: phonePx(14),
    top: phonePx(12) + statusBarHeight,
    width: phonePx(20),
    height: phonePx(20),
    alignItems: 'center',
    justifyContent: 'center'
  }
});
